import React, { Component } from 'react';
import { messages } from "share/common";
import { Button, Col, Collapse, Icon, Popconfirm, Row } from "antd";
import SlideFrame from 'components/slide-frame'
import Condition from 'components/condition';
import Detail from './detail'
import 'styles/setting/notification-setting/message-remind.scss'

const Panel = Collapse.Panel;
const { If } = Condition;

class NoFinanceApproverNotice extends Component {

  handleEdit = record => {
    SlideFrame.open({
      title: messages('basic-13.key6')/*新建消息设置*/,
      content: Detail,
      afterClose: this.props.onRefresh,
      params: {
        data: record || {}
      }
    }, this)
  };

  filterData = data => {
    return data ? data.filter(item => item.code === 'NoFinanceApproverNoticeTask') : [];
  };

  renderPanelHeader = item => (
    <div className="display-title-wrapper">
      <div className="display-title">{messages('basic-13.key205')/*审核人配置提醒*/}</div>
      <If value={!this.props.disabled}>
        <div className="display-btn-group">
          <div className="btn btn-edit" onClick={e => {e.stopPropagation(); this.handleEdit(item);}}>
            {messages('common.edit')/*编辑*/}
          </div>
          <Popconfirm
            onConfirm={() => this.props.onDelete(item)}
            onClick={e => e.stopPropagation()}
            title={messages('basic-13.key29')/*你确定要删除这条数据吗?*/}
          >
            <div className="btn btn-delete">{messages('common.delete')/*删除*/}</div>
          </Popconfirm>
        </div>
      </If>
    </div>
  );

  renderColumn = (label, value, key) => {
    const valueMap = {
      enabledFlag: value ? messages('basic-13.key8')/*启用temp*/ : messages('basic-13.key31')/*禁用temp*/,
      content: (<div>
        {messages('basic-13.key206')/*您好，以下单据审批通过时间在#开始时间#到#结束时间#之间，未找到对应的单据审核人，请查看并及时维护对应的财务审核人员，避免影响单据处理进度。*/}
        <br/>
        #{messages('basic-13.key207')/*单据明细列表*/}#
      </div>),
      hour: value > 10 ? `${value}:00` : `0${value}:00`,
      remindDay: `${messages('basic-13.key210')/*单据审批通过时间在提醒日前*/}${value && value.remindDay}${messages('basic-13.key211')/*天内的单据*/}`
    };
    return (
      <Row>
        <Col span={4}>{label}:</Col>
        <Col span={18}>{key ? valueMap[key] : value}</Col>
      </Row>
    )
  };

  renderNoticeEntity = record => {
    let params = JSON.parse(record.params);
    let showValue = [];
    params.systemAdmins && showValue.push(messages('basic-13.key13')/*全租户权限的超级管理员角色*/);
    params.noticeName && showValue.push(params.noticeName);
    return showValue.join('、');
  };

  render() {
    const { data, disabled } = this.props;
    return (
      <div className="no-finance-approver message-remind-wrapper">
        <div className="header">1、{messages('basic-13.key213')/*仅支持租户级别配置是否启用消息提醒*/}</div>
        <div className="header">2、{messages('basic-13.key214')/*仅可配置一条启用中的规则*/}</div>
        <div className="header">3、{messages('basic-13.key215')/*系统只对单据状态为“已通过”的待审核单据，若判断没有对应在职审核人员，则发送单据列表*/}</div>
        <div className="header">4、{messages('basic-13.key216')/*仅支持邮件提醒*/}</div>
        <div className="header" style={{ marginBottom: 20 }}>5、{messages('basic-13.key217')/*若提醒发送人数大于5名用户，则提醒邮件仅会发送前5名*/}</div>
        {this.filterData(data).map(item => (
          <Collapse key={item.id} bordered={false}>
            <Panel header={this.renderPanelHeader(item)}>
              {this.renderColumn(messages('common.column.status')/*状态*/, item.enabledFlag, 'enabledFlag')}
              {this.renderColumn(messages('basic-13.key32')/*组织层级*/, item.tenantName)}
              {this.renderColumn(messages('basic-13.key12')/*提醒对象*/, this.renderNoticeEntity(item))}
              {this.renderColumn(messages('basic-13.key16')/*消息标题*/, messages('basic-13.key205')/*审核人配置提醒*/)}
              {this.renderColumn(messages('basic-13.key17')/*消息正文*/, '', 'content')}
              {this.renderColumn(messages('basic-13.key85')/*提醒类型*/, messages('basic-13.key218')/*每天*/)}
              {this.renderColumn(messages('basic-13.key219')/*每天提醒时间*/, item.hour, 'hour')}
              {this.renderColumn(messages('basic-13.key209')/*提醒单据范围*/, JSON.parse(item.params || '{}'), 'remindDay')}
            </Panel>
          </Collapse>
        ))}
        <Button
          disabled={disabled}
          type="dashed"
          className="btn-add"
          onClick={() => this.handleEdit()}
        >
          <Icon type="plus"/>{messages('common.add')/*添加*/}
        </Button>
      </div>
    )
  }
}

export default NoFinanceApproverNotice;
